<template lang="">
    <div class="box" >
       <div class="box" ref="box"></div>
    </div>
</template>
<script>
import * as echarts from "echarts"
export default {
    data() {
        return {
           
        }
    },
    mounted() {
        this.echar()
    },
    methods: {
        echar() {
            let mychart = echarts.init(this.$refs.box)
            let mycolor=['#0974cb','#8f475e','#5cc4d8','#86694b','#584da4']
            let option = {
              title:{
                text:'大洲感染总人数趋势图',
                left:'50%',
                textAlign:"center",
                textStyle:{
                    color:'#fff'
                }
              },
              legend:{
                top:35,
                align:"auto",
                textStyle:{
                   color:'#fff'
                },
                itemStyle:{
                    borderColor:function(res){
                        return mycolor[res.dataIndex]
                    }
                }
              },
              xAxis:{
                type:'category',
                boundaryGap :false,
                data:['06.09','06.23','07.07','07.21','08.04','08.18','09.02'],
                labelStyle:{
                       color:'#fff'
                    },
                    axisLine:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        color:"#FFF"
                    }
              },
              yAxis:[
              {
                type:'value',
                labelStyle:{
                       color:'#fff'
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#002242'
                        }
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#002242'
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        color:"#FFF"
                    }

              },
              {
                type:'value',
                labelStyle:{
                       color:'#fff'
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#002242'
                        }
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#002242'
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        color:"#FFF"
                    }

              },
              
              ],
              grid:{
               bottom:35,
               left:80,
               top:55
              },
              series:[
                {
                    type:'line',
                    data:[0,0,0,0,0,0,0],
                    name:'死亡人数',
                    smooth: true , 
                    symbol:'none'
                },
                {
                    type:'line',
                    data:[30000000,32000000,32500000,33000000,33500000,40000000,42000000],
                    name:'治愈人数',
                    smooth: true ,
                    symbol:'none',
                    areaStyle:{
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#25938b' },
                        { offset: 0.5, color: '#013659' },
                        { offset: 1, color: 'transparent' }
                    ])
                    }
                }
              ],
                
            }
            mychart.setOption(option)
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    width: 400px;
    height: 220px;
    // border: 1px solid #000;
}
</style>